function createErrorPanel(){
	
	var resultPanel = Ext.create('Ext.panel.Panel', {
		title : 'Please, correct the errors below : ', 
		width : 450, 
		bodyPadding : 10,
		frame : true, 
		renderTo : 'errors',
		items : [{
			xtype : 'displayfield', 
			name : 'resultField', 
			fieldLabel : 'Error ',		
		}]
	}); 
	
	return resultPanel; 
}

function createForm(){
	
	Ext.QuickTips.init();
		
	Ext.create('Ext.form.Panel', {
		renderTo : 'signup_form', 
		frame : true, 
		title : 'Sign up', 
		width : 400,  
		url : 'RegistrationServlet', 
		method : 'POST', 
		
		fieldDefaults : {
			labelAlign : 'left', 
			labelWidth : 110, 
			anchor : '100%'
		},
		
		items : [{
			xtype : 'textfield', 
			fieldLabel : 'Name ', 
			name : 'name',
			allowBlank : false,
		}, {
			xtype : 'textfield', 
			fieldLabel : 'E-mail ', 
			vtype : 'email',
			name : 'email', 
			allowBlank : false
		}, {
			xtype : 'textfield', 
			fieldLabel : 'Confirm e-mail ', 
			vtype : 'email',
			name : 'confirmMail', 
			allowBlank : false, 
			validator : function(value){
				var firstMail = this.previousSibling('[name=email]'); 
				return (value === firstMail.getValue()) ? true : 'Email confirmation do not match'
			}
		}, {
			xtype : 'textfield', 
			fieldLabel : 'Username ', 
			name : 'username',
			allowBlank : false
		}, {
			xtype : 'textfield', 
			fieldLabel : 'Password ',
			inputType : 'password', 
			name : 'password', 
			allowBlank : false
		}, {
			xtype : 'textfield', 
			fieldLabel : 'Confirm password ',
			inputType : 'password', 
			name : 'confirmPassword', 
			allowBlank : false,
			validator : function(value){
				var firstPwd = this.previousSibling('[name=password]'); 
				return (value === firstPwd.getValue()) ? true : 'Password confirmation do not match'
			}
		}, {
			xtype : 'button', 
			text : 'Sign up', 
			disabled : true, 
			formBind : true,
			handler : function(){
				var dataToSend = this.up('form').getForm(); 
				dataToSend.submit(
				{
					success:function(form, action)
					{
						var result = Ext.JSON.decode(action.response.responseText);
						var resultPanel = createErrorPanel(); 
						resultPanel.items.items[0].setValue(result.data[0].username);
					}, 
					
					/*Failure if all the fields are correct*/
					failure:function(form, action){
						alert("You have successfully registered")
						location.href = '/Cafca/index.html'; 
					}
				}
				
				); 
			}
		}]
	});
}

Ext.onReady(createForm); 